<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta name="keywords" content="">
        <meta name="deacription" content="">
        <link rel="stylesheet" href="./">
        <title></title>
        
    </head>
    <body>
        <div id="app">
            {{num}}
            <button @click="num++">按钮</button><br>
            {{arr}}
            <button @click="addValue">增加</button>
        </div>
        <script src="../js/vue.js"></script>
        <script>
            const vm = new Vue({
                data:{
                    num:0,
                    arr:[
                        {id:1,name:"linda",age:29},
                        {id:2,name:"tony",age:30},
                    ],
                },
                methods:{
                    addValue(){
                        // this.arr.push({id:3,name:"sansai",age:20});
                        this.arr[0].age++;
                    },
                },
                // 监视
                watch:{
                    // 第一种监视方法
                    num(newNum,oldNum){
                        console.log(newNum,oldNum);
                    },
                    // 第二种监视方法
                    arr:{
                        handler(newVal,oldVal){
                            console.log(newVal,oldVal);
                        },
                        // 立即监视：第一次就触发
                        immediate:true,
                        // 深度监视：可监视内部数据变化，普通监视不可以
                        deep:true,
                    }
                },
            });
            vm.$mount("#app");
        </script>
    </body>
</html>